<template>
  <div class="dashboard-container">
    <h2 class="title">欢迎回来，{{name}}</h2>
    <p class="title_describe">Hi ~ Happy Work Day, Would you like to drink something?</p>
    <div class="top_choose">
      <p class="title_describe">Coffee, tea, coke or wine?</p>
      <div class="right_block">
        <p class="updateTime">数据更新于：{{ updateWatchDate|dateformat('YYYY-MM-DD HH:mm:ss') }}</p>
        <el-button 
          type="primary" 
          size="small" 
          style="width: 150px;" 
          :loading="refreshData" 
          @click="handleRefreshData"
          v-loading.fullscreen.lock="fullscreenLoading"
        >刷新数据</el-button>
      </div>
    </div>

    <!-- 数据展示区域 -->
    <el-row class="dataShowArea">
      <el-col :span="11" class="dataArea">
        <div class="left">用户</div>
        <div class="dataDetail">
          <div class="line_1">{{ registerDayNum }}</div>
          <div class="line_2">今日注册用户</div>
          <div class="line_3">
            <div class="week">本周<b>{{ registerWeekNum }}</b></div>
            <div class="month">本月<b>{{ registerMonthNum }}</b></div>
          </div>
          <div class="line_4">
            <div class="year">本年<b>{{ registerYearNum }}</b></div>
          </div>
        </div>
        <div class="dataDetail">
          <div class="line_1">{{ loginDayNum }}</div>
          <div class="line_2">今日登录用户</div>
          <div class="line_3">
            <div class="week">本周<b>{{ loginWeekNum }}</b></div>
            <div class="month">本月<b>{{ loginMonthNum }}</b></div>
          </div>
          <div class="line_4">
            <div class="year">本年<b>{{ loginYearNum }}</b></div>
          </div>
        </div>
      </el-col>
      <el-col :span="11" :offset="2" class="dataArea">
        <div class="left">资讯</div>
        <div class="dataDetail">
          <div class="line_1">{{ topicDayNum }}</div>
          <div class="line_2">今日新增资讯</div>
          <div class="line_3">
            <div class="week">本周<b>{{ topicWeekNum }}</b></div>
            <div class="month">本月<b>{{ topicMonthNum }}</b></div>
          </div>
          <div class="line_4">
            <div class="year">本年<b>{{ topicYearNum }}</b></div>
          </div>
        </div>
        <div class="dataDetail">
          <div class="line_1">{{ topicCommentDayNum }}</div>
          <div class="line_2">今日新增资讯评论</div>
          <div class="line_3">
            <div class="week">本周<b>{{ topicCommentWeekNum }}</b></div>
            <div class="month">本月<b>{{ topicCommentMonthNum }}</b></div>
          </div>
          <div class="line_4">
            <div class="year">本年<b>{{ topicCommentYearNum }}</b></div>
          </div>
        </div>
      </el-col>
      <el-col :span="11" class="dataArea">
        <div class="left">专家</div>
        <div class="dataDetail">
          <div class="line_1">{{ questionDayNum }}</div>
          <div class="line_2">今日新增用户对专家提问</div>
          <div class="line_3">
            <div class="week">本周<b>{{ questionWeekNum }}</b></div>
            <div class="month">本月<b>{{ questionMonthNum }}</b></div>
          </div>
          <div class="line_4">
            <div class="year">本年<b>{{ questionYearNum }}</b></div>
          </div>
        </div>
        <div class="dataDetail">
          <div class="line_1">{{ answerDayNum }}</div>
          <div class="line_2">今日新增专家对用户回复</div>
          <div class="line_3">
            <div class="week">本周<b>{{ answerWeekNum }}</b></div>
            <div class="month">本月<b>{{ answerMonthNum }}</b></div>
          </div>
          <div class="line_4">
            <div class="year">本年<b>{{ answerYearNum }}</b></div>
          </div>
        </div>
      </el-col>
      <el-col :span="11" :offset="2" class="dataArea">
        <div class="left">院校</div>
        <div class="dataDetail">
          <div class="line_1">{{ yxQuestionDayNum }}</div>
          <div class="line_2">今日新增用户对院校答疑</div>
          <div class="line_3">
            <div class="week">本周<b>{{ yxQuestionWeekNum }}</b></div>
            <div class="month">本月<b>{{ yxQuestionMonthNum }}</b></div>
          </div>
          <div class="line_4">
            <div class="year">本年<b>{{ yxQuestionYearNum }}</b></div>
          </div>
        </div>
        <div class="dataDetail">
          <div class="line_1">{{ yxAnswerDayNum }}</div>
          <div class="line_2">今日新增院校对用户回复</div>
          <div class="line_3">
            <div class="week">本周<b>{{ yxAnswerWeekNum }}</b></div>
            <div class="month">本月<b>{{ yxAnswerMonthNum }}</b></div>
          </div>
          <div class="line_4">
            <div class="year">本年<b>{{ yxAnswerYearNum }}</b></div>
          </div>
        </div>
      </el-col>
    </el-row>  

    <el-row style="margin-bottom: 30px;">
      <big>数据排名</big>
    </el-row>
    <el-row class="dataIn">
      <el-col :span="11" class="rankArea">
        <div class="rankHeadTitle">资讯排名 TOP 10</div>
        <div class="rankChooseType">
          <span class="clickType" @click="handleChangeTopicChoType(0)">访问</span>
          <span class="clickType" @click="handleChangeTopicChoType(1)">点赞</span>
        </div>
        <ul class="rankListGroup">
          <li class="rankItem">
            <div class="itemName">资讯名称</div>
            <div class="itemData">{{ topicChoType == 0 ? '访问次数' : '点赞次数'}}</div>
          </li>
          <li class="rankItem" v-show="topicChoType == 0" v-for="(item, index) of topicViews" :key="index" >
            <div class="itemName">{{ (index+1) + '. ' + item.title}}</div>
            <div class="itemData">{{ item.view }}</div>
          </li>
          <li class="rankItem" v-show="topicChoType == 1" v-for="(item, index) of topicLikes" :key="index+20" >
            <div class="itemName">{{ (index+1) + '. ' + item.title}}</div>
            <div class="itemData">{{ item.likeNum }}</div>
          </li>
        </ul>
      </el-col>
      <el-col :span="11" :offset="2" class="rankArea">
        <div class="rankHeadTitle">课程排名 TOP 10</div>
        <div class="rankChooseType">
          <span class="clickType" style="borderRight: none;">访问</span>
          <!-- <span class="clickType" @click="handleChangeCourseChoType(1)">点赞</span> -->
        </div>
        <ul class="rankListGroup">
          <li class="rankItem">
            <div class="itemName">课程名称</div>
            <div class="itemData">访问次数</div>
          </li>
          <li class="rankItem" v-for="(item, index) of lessons" :key="index" >
            <div class="itemName">{{ (index+1) + '. ' + item.lessonName}}</div>
            <div class="itemData">{{ item.lessonView }}</div>
          </li>
        </ul>
      </el-col>
      <el-col :span="11" class="rankArea">
        <div class="rankHeadTitle">活跃院校榜 TOP 10</div>
        <div class="rankChooseType">
          <span class="clickType" @click="handleChangeYxChoType(0)">答疑</span>
          <span class="clickType" @click="handleChangeYxChoType(1)">动态</span>
        </div>
        <ul class="rankListGroup">
          <li class="rankItem">
            <div class="itemName">院校名</div>
            <div class="itemData">{{ yxChoType == 0 ? '回复次数' : '动态次数'}}</div>
          </li>
          <li class="rankItem" v-show="yxChoType == 0" v-for="(item, index) of yxAnswers" :key="index" >
            <div class="itemName">{{ (index+1) + '. ' + item.yxName}}</div>
            <div class="itemData">{{ item.yxAnswerNum }}</div>
          </li>
          <li class="rankItem" v-show="yxChoType == 1" v-for="(item, index) of yxMoments" :key="index+20" >
            <div class="itemName">{{ (index+1) + '. ' + item.yxName}}</div>
            <div class="itemData">{{ item.yxMomentNum }}</div>
          </li>
        </ul>
      </el-col>
      <el-col :span="11" :offset="2" class="rankArea">
        <div class="rankHeadTitle">专家榜 TOP 10</div>
        <div class="rankChooseType">
          <span class="clickType" @click="handleChangeSpecialistChoType(0)">问答</span>
          <span class="clickType" @click="handleChangeSpecialistChoType(1)">文章</span>
        </div>
        <ul class="rankListGroup">
          <li class="rankItem">
            <div class="itemName">专家名</div>
            <div class="itemData">{{ specialistChoType == 0 ? '问答次数' : '文章次数'}}</div>
          </li>
          <li class="rankItem" v-show="specialistChoType == 0" v-for="(item, index) of professorAnswers" :key="index" >
            <div class="itemName">{{ (index+1) + '. ' + item.professorName}}</div>
            <div class="itemData">{{ item.professorAnswerNum }}</div>
          </li>
          <li class="rankItem" v-show="specialistChoType == 1" v-for="(item, index) of professorTopics" :key="index+20" >
            <div class="itemName">{{ (index+1) + '. ' + item.professorName}}</div>
            <div class="itemData">{{ item.professorTopicNum }}</div>
          </li>
        </ul>
      </el-col>
    </el-row>


    <!-- 概况查询 -->
    <el-row style="margin-bottom: 30px;">
      <big>概况查询</big>
    </el-row>
    <el-row style="margin-bottom: 30px;">
      <el-date-picker
        v-model="dataValue"
        @change="handleDateChange"
        type="month"
        format="yyyy年MM月"
        style="margin-right: 20px;"
        placeholder="请选择需要查询的月份"
      >
      </el-date-picker>
      <el-button type="primary" size="middle" :loading="searchMonth" @click="handleSearchMonthData">查询</el-button>
    </el-row>
    <el-row class="situationQuery" v-show="hasSearchDateData">
      <el-col :span="11" class="situationPart">
        <div class="name">用户</div>
        <div class="content">
          <div class="data">{{ monthNewUserNum }}</div>
          <div class="nameOfData">当月注册用户</div>
        </div>
        <div class="content">
          <div class="data">{{ monthUserLoadNum }}</div>
          <div class="nameOfData">当月登录用户</div>
        </div>
      </el-col>
      <el-col :span="11" :offset="2" class="situationPart">
        <div class="name">资讯</div>
        <div class="content">
          <div class="data">{{ monthNewTopicNum }}</div>
          <div class="nameOfData">当月新增资讯</div>
        </div>
        <div class="content">
          <div class="data">{{ monthNewTopicCommentNum }}</div>
          <div class="nameOfData">当月新增资讯评论</div>
        </div>
      </el-col>
      <el-col :span="11" class="situationPart">
        <div class="name">专家</div>
        <div class="content">
          <div class="data">{{ monthQuestionNum }}</div>
          <div class="nameOfData">当月新增用户对专家提问</div>
        </div>
        <div class="content">
          <div class="data">{{ monthAnswerNum }}</div>
          <div class="nameOfData">当月新增专家对用户回复</div>
        </div>
      </el-col>
      <el-col :span="11" :offset="2" class="situationPart">
        <div class="name">院校</div>
        <div class="content">
          <div class="data">{{ monthYxQuestionNum }}</div>
          <div class="nameOfData">当月新增用户对院校答疑</div>
        </div>
        <div class="content">
          <div class="data">{{ monthYxAnswerNum }}</div>
          <div class="nameOfData">当月新增院校对用户回复</div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryAppDashBoardRecordNum, queryAppDashBoardNumByYearAndMonth, queryAppDashBoardRankNum, queryAppDashBoard } from '@/api/dashboard'
export default {
  name: 'Dashboard',
  data(){
    return{
      dataValue: '',
      hasSearchDateData: false,
      refreshData: false,
      searchMonth: false,
      updateWatchDate: '', // 数据刷新的更新时间
      fullscreenLoading: false,

      // 数据展示区域
      answerDayNum: 0, // 本日专家问答回复数
      answerMonthNum: 0, // 本月专家问答回复数
      answerWeekNum: 0, // 本周专家问答回复数
      answerYearNum: 0, // 本年专家问答回复数

      loginDayNum: 0, // 本日用户登录数
      loginMonthNum: 0, // 本月用户登录数
      loginWeekNum: 0, // 本周用户登录数
      loginYearNum : 0, // 本年用户登录数

      questionDayNum: 0, // 本日专家问答数
      questionMonthNum: 0, // 本月专家问答数
      questionWeekNum: 0, // 本周专家问答数
      questionYearNum: 0, // 本年专家问答数

      registerDayNum: 0, // 本日用户注册数
      registerMonthNum: 0, // 本月用户注册数
      registerWeekNum: 0, // 本周用户注册数
      registerYearNum: 0, // 本年用户注册数

      topicCommentDayNum: 0, // 本日新增资讯评论数
      topicCommentMonthNum: 0, // 本月新增资讯评论数
      topicCommentWeekNum: 0, // 本周新增资讯评论数
      topicCommentYearNum: 0, // 本年新增资讯评论数

      topicDayNum: 0, // 本日新增资讯数
      topicMonthNum: 0, // 本月新增资讯数
      topicWeekNum: 0, // 本周新增资讯数
      topicYearNum: 0, // 本年新增资讯数

      yxAnswerDayNum: 0, //本日院校答疑回复数
      yxAnswerMonthNum: 0, //本月院校答疑回复数
      yxAnswerWeekNum: 0, //本周院校答疑回复数
      yxAnswerYearNum: 0, //本年院校答疑回复数

      yxQuestionDayNum: 0, //本日院校答疑数
      yxQuestionMonthNum: 0, //本月院校答疑数
      yxQuestionWeekNum: 0, //本周院校答疑数
      yxQuestionYearNum: 0, //本年院校答疑数

      // 查看数据排名
      topicChoType: 0, // 资讯排名    0 ==> 访问量    1 ==> 点赞数
      topicViews: [], // 资讯访问
      topicLikes: [], // 资讯点赞

      lessons: [], // 课程访问

      yxChoType: 0, // 院校排名    0 ==> 答疑    1 ==> 动态
      yxAnswers: [], // 答疑院校
      yxMoments: [], // 动态院校

      specialistChoType: 0, // 专家排名    0 ==> 问答    1 ==> 文章
      professorAnswers: [], // 专家回复
      professorTopics: [], // 专家发表文章

      // 概况查询
      monthAnswerNum: null, // 当月专家对用户回答数量
      monthQuestionNum: null, // 当月用户对专家提问数量
      monthNewTopicCommentNum: null, // 当月新增资讯评论数量
      monthNewTopicNum: null, // 当月新增资讯数量
      monthNewUserNum: null, // 当月新注册用户数量
      monthUserLoadNum: null, // 当月登陆用户次数
      monthYxAnswerNum: null, // 当月院校对用户回复数量
      monthYxQuestionNum: null // 当月用户对院校答疑数量

    }
  },
  computed:{
    ...mapGetters(['name'])
  },
  mounted() {
    const now = new Date()
    const month = (now.getMonth() + 1) >= 10 ? (now.getMonth() + 1) : ('0' + (now.getMonth() + 1))
    this.dataValue = now.getFullYear() + '-' + month

    this.getHistoryData()
  },

  methods: {
    // dashBoard首页查询上次浏览记录
    getHistoryData() {
      queryAppDashBoard().then(res => {
        if (res.code == 0) {
          const data = res.data
          const recordVo = res.data.dashboardRecordVo
          // 给数据附上历史值
          this.professorAnswers = data.professorAnswer
          this.professorTopics = data.professorTopic
          this.lessons = data.lesson
          this.yxAnswers = data.yxAnswer
          this.yxMoments = data.yxMoment
          this.topicLikes = data.topicLike
          this.topicViews = data.topicView

          this.updateWatchDate = recordVo.updateTime

          this.answerDayNum = recordVo.answerDayNum
          this.answerMonthNum = recordVo.answerMonthNum
          this.answerWeekNum = recordVo.answerWeekNum
          this.answerYearNum = recordVo.answerYearNum

          this.loginDayNum = recordVo.loginDayNum
          this.loginMonthNum = recordVo.loginMonthNum
          this.loginWeekNum = recordVo.loginWeekNum
          this.loginYearNum = recordVo.loginYearNum

          this.questionDayNum = recordVo.questionDayNum
          this.questionMonthNum = recordVo.questionMonthNum
          this.questionWeekNum = recordVo.questionWeekNum
          this.questionYearNum = recordVo.questionYearNum

          this.registerDayNum = recordVo.registerDayNum
          this.registerMonthNum = recordVo.registerMonthNum
          this.registerWeekNum = recordVo.registerWeekNum
          this.registerYearNum = recordVo.registerYearNum

          this.topicCommentDayNum = recordVo.topicCommentDayNum
          this.topicCommentMonthNum = recordVo.topicCommentMonthNum
          this.topicCommentWeekNum = recordVo.topicCommentWeekNum
          this.topicCommentYearNum = recordVo.topicCommentYearNum

          this.topicDayNum = recordVo.topicDayNum
          this.topicMonthNum = recordVo.topicMonthNum
          this.topicWeekNum = recordVo.topicWeekNum
          this.topicYearNum = recordVo.topicYearNum

          this.yxAnswerDayNum = recordVo.yxAnswerDayNum
          this.yxAnswerMonthNum = recordVo.yxAnswerMonthNum
          this.yxAnswerWeekNum = recordVo.yxAnswerWeekNum
          this.yxAnswerYearNum = recordVo.yxAnswerYearNum

          this.yxQuestionDayNum = recordVo.yxQuestionDayNum
          this.yxQuestionMonthNum = recordVo.yxQuestionMonthNum
          this.yxQuestionWeekNum = recordVo.yxQuestionWeekNum
          this.yxQuestionYearNum = recordVo.yxQuestionYearNum
        }
      }).catch(error => {
        // this.$message(error);
      }).finally(() => {
      })
    },

    // 选择日期时触发的事件
    handleDateChange(value) {
      if (value) {
        const month = (value.getMonth() + 1) >= 10 ? (value.getMonth() + 1) : ('0' + (value.getMonth() + 1))
        this.dataValue = value.getFullYear() + '-' + month
      } else {
        this.dataValue = ''
      }
    },
    // 刷新当日数据
    handleRefreshData() {
      this.refreshData = true
      this.fullscreenLoading = true
      this.getRecordNum()
      this.getRankNum()
    },

    // 查询本日本周本月新增数据
    getRecordNum() {
      queryAppDashBoardRecordNum().then(res => {
        if (res.code == 0) {
          const data = res.data

          this.updateWatchDate = data.updateTime

          this.answerDayNum = data.answerDayNum
          this.answerMonthNum = data.answerMonthNum
          this.answerWeekNum = data.answerWeekNum
          this.answerYearNum = data.answerYearNum

          this.loginDayNum = data.loginDayNum
          this.loginMonthNum = data.loginMonthNum
          this.loginWeekNum = data.loginWeekNum
          this.loginYearNum = data.loginYearNum

          this.questionDayNum = data.questionDayNum
          this.questionMonthNum = data.questionMonthNum
          this.questionWeekNum = data.questionWeekNum
          this.questionYearNum = data.questionYearNum

          this.registerDayNum = data.registerDayNum
          this.registerMonthNum = data.registerMonthNum
          this.registerWeekNum = data.registerWeekNum
          this.registerYearNum = data.registerYearNum

          this.topicCommentDayNum = data.topicCommentDayNum
          this.topicCommentMonthNum = data.topicCommentMonthNum
          this.topicCommentWeekNum = data.topicCommentWeekNum
          this.topicCommentYearNum = data.topicCommentYearNum

          this.topicDayNum = data.topicDayNum
          this.topicMonthNum = data.topicMonthNum
          this.topicWeekNum = data.topicWeekNum
          this.topicYearNum = data.topicYearNum

          this.yxAnswerDayNum = data.yxAnswerDayNum
          this.yxAnswerMonthNum = data.yxAnswerMonthNum
          this.yxAnswerWeekNum = data.yxAnswerWeekNum
          this.yxAnswerYearNum = data.yxAnswerYearNum

          this.yxQuestionDayNum = data.yxQuestionDayNum
          this.yxQuestionMonthNum = data.yxQuestionMonthNum
          this.yxQuestionWeekNum = data.yxQuestionWeekNum
          this.yxQuestionYearNum = data.yxQuestionYearNum
        }
      }).catch(error => {
        // this.$message(error);
      }).finally(() => {
        this.refreshData = false
        this.fullscreenLoading = false
      })
    },

    // 查询排名数据
    getRankNum() {
      queryAppDashBoardRankNum().then(res => {
        if (res.code == 0) {
          const data = res.data
          this.topicViews = data.topicViews
          this.topicLikes = data.topicLikes
          this.lessons = data.lessons
          this.yxAnswers = data.yxAnswers
          this.yxMoments = data.yxMoments
          this.professorAnswers = data.professorAnswers
          this.professorTopics = data.professorTopics
        }
      }).catch(error => {
        // this.$message(error);
      }).finally(() => {
        this.refreshData = false
      })
    },

    handleChangeTopicChoType(type) {
      this.topicChoType = type
    },
    handleChangeYxChoType(type) {
      this.yxChoType = type
    },
    handleChangeSpecialistChoType(type) {
      this.specialistChoType = type
    },

    // 查询某月数据
    handleSearchMonthData() {
      this.searchMonth = true
      queryAppDashBoardNumByYearAndMonth(this.dataValue).then(res => {
        if (res.code == 0) {
          this.hasSearchDateData = true
          const data = res.data
          this.monthAnswerNum = data.answerNum
          this.monthNewTopicCommentNum = data.newTopicCommentNum
          this.monthNewTopicNum = data.newTopicNum
          this.monthUserLoadNum = data.userLoadNum
          this.monthNewUserNum = data.newUserNum
          this.monthQuestionNum = data.questionNum
          this.monthYxQuestionNum = data.yxQuestionNum
          this.monthYxAnswerNum = data.yxAnswerNum
        }
      }).catch(error => {
        this.$message(error)
      }).finally(() => {
        this.searchMonth = false
      })
    }
  }
}
</script>
<style lang="scss">
.dashboard-container{
  padding: 10px 50px;

  .title {
    font-size: 30px;
  }

  p { margin: 0; }

  .title_describe {
    color: #999;
  }

  .top_choose {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .right_block {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .updateTime {
        color: #999;
        margin-right: 10px;
        font-size: 12px;
      }
    }

  }

  .dataShowArea {
    margin-bottom: 20px;

    .dataArea {
      padding: 30px 40px;
      margin-bottom: 30px;
      border: 1px solid #bbb;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        font-size: 30px;
      }

      .dataDetail {
        margin-left: 40px;
        width: 35%;
        .line_1 {
          font-size: 46px;
          margin-bottom: 25px;
        }

        .line_2 {
          font-size: 15px;
          margin-bottom: 15px;
          letter-spacing: 1px;
        }

        .line_3 {
          font-size: 14px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 15px;

          .week {
            margin-right: 40px;
          }

          b {
            margin-left: 20px;
          }

        }

        .line_4 {
          font-size: 14px;

          b {
            margin-left: 20px;
          }

        }
      }
    }
  }

  .dataIn {
    .rankArea {
      padding: 20px 10px;
      border: 1px solid #bbb;
      border-radius: 5px;
      margin-bottom: 30px;

      .rankHeadTitle {
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        font-size: 16px;
        margin-bottom: 10px;
      }

      .rankChooseType {
        margin-bottom: 20px;

        .clickType {
          display: inline-block;
          font-size: 14px;
          color: #999;
          padding: 0 5px 0 0;
          cursor: pointer;
        }

        .clickType:first-child { border-right: 1px solid #999; }

      }

      .rankListGroup {
        list-style: none;
        padding-left: 0;

        .rankItem {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #999;
          font-size: 14px;
          margin-bottom: 5px;
        }

      }


    }
  }

  .situationQuery {
    .situationPart {
      border: 1px solid #bbb;
      padding: 40px 30px;
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name {
        font-size: 24px;
      }

      .content {
        margin-right: 40px;
        width: 30%;

        .data {
          font-size: 40px;
          margin-bottom: 30px;
        }

        .nameOfData {
          font-size: 12px;
          letter-spacing: 1px;
        }
      }

    }
  }

}
  
</style>

